<template>
	<div class="worktime-container">
		<el-dialog title="绑定工作时间规则" custom-class="addworktime-dialog" :visible.sync="showBindGroupWorkTime" width="50%" :before-close="closeBindGroupWorkTime">
			<Table :tableData="workingTimeData" ref="tableEle" @changeSelect="changeSelect" @currentChange="currentChange">
				<template v-slot:btn>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" class="set-btn" @click="detailsWorkTime(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</template>
			</Table>
			<div class="page">
				<PageSize :pages="workingTimeData.checkData" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<DetailsWorkingTime v-if="showDetailsWorkTime" :showDetailsWorkTime="showDetailsWorkTime" @closeDetailsWorkTime="closeDetailsWorkTime" />

			<div class="btn">
				<el-button type="primary" class="" @click="apply">应用</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import DetailsWorkingTime from '@/views/components/DetailsWorkingTime.vue';
import { selectWorkingTimeByList } from '@/api/api.js';
export default {
	components: {
		Table,
		PageSize,
		DetailsWorkingTime
	},
	props: {
		showBindGroupWorkTime: {
			type: Boolean,
			required: true,
			default: () => false
		},
		workingTimeData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			activeName: 'worktime',
			showDetailsWorkTime: false,
			selectWorkTimeId: null
		};
	},
	methods: {
		// 详情工作时间规则
		detailsWorkTime(index, row) {
			console.log(index, row);
			const { workTimeId, workTimeName } = row;
			this.$store.commit('SET_EDIT_WORK_TIMES_ID', workTimeId);
			this.$store.commit('SET_EDIT_WORK_TIMES_NAME', workTimeName);
			selectWorkingTimeByList(row.workTimeId)
				.then(res => {
					console.log(res.data);
					this.workTimes = res.data.data.workTimePeriods;
					let workTimePeriods = [];
					this.workTimes.forEach(item => {
						let workTime = { startHour: '', startMinute: '', startSecond: '', endHour: '', endMinute: '', endSecond: '' };
						workTime.startHour = item.startTime.split(':')[0];
						workTime.startMinute = item.startTime.split(':')[1];
						workTime.startSecond = item.startTime.split(':')[2];
						workTime.endHour = item.endTime.split(':')[0];
						workTime.endMinute = item.endTime.split(':')[1];
						workTime.endSecond = item.endTime.split(':')[2];
						workTimePeriods.push(workTime);
						this.showDetailsWorkTime = true;
					});
					this.$store.commit('SET_EDIT_WORK_TIMES_TIMES', workTimePeriods);
				})
				.catch(err => {
					this.$message.error('获取失败');
					console.log(err.message);
				});
		},
		closeDetailsWorkTime() {
			this.showDetailsWorkTime = false;
		},

		changePageSize(val) {
			this.$emit('changePageSizeWorkingTime', val);
		},
		changeCurrentPage(val) {
			this.$emit('changeCurrentPageWorkingTime', val);
		},
		changeSelect(workTime) {
			console.log(workTime);
			this.selectWorkTimeId = workTime.workTimeId;
		},
		closeBindGroupWorkTime() {
			this.$emit('closeBindGroupWorkTime');
		},
		apply() {
			this.$emit('apply', this.selectWorkTimeId);
		}
	}
};
</script>

<style lang="less" scoped>
.worktime-container {
	.head {
		padding-bottom: 20px;
		.el-button {
			width: 84px;
			height: 36px;
			background-color: #6384fe;
			padding: 0;
		}
	}
	.set-btn {
		color: #fff;
		background-color: #6384fe;
	}
	.page {
		margin-top: 15px;
	}
	.btn {
		text-align: right;
		.el-button {
			background: #6384fe;
		}
	}
}
</style>
